 
<template>
  <div class="screen">
    <div class="screen_title df jc-sb w100 ai-c"><span>{{title }}</span><lay-button size="sm" @click="close">关闭</lay-button></div>

    <div class="screen_content">
      <div v-if="dataSource4.length>0">
        <lay-table :columns="columns4" :data-source="dataSource4" style="width: 200px;">
          <template #keyCustom="{ row }">
            <span :style="{color: row.key==1?'#19aeff':'#db1515'}">{{ row.key==1?"已完成":'未完成' }}</span>
          </template>
        </lay-table>
      </div>
      <div v-else>
        <lay-empty description="暂无数据"></lay-empty>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import http from "@/http";
import { useRouter, useRoute } from "vue-router";
import { ref, onMounted } from "vue";
const route = useRoute();
const router = useRouter();
const meetingId = ref(route.query.id);
const url = ref(route.query.url);
const title = ref(route.query.title);
// 关闭
const close = async () => { 
  router.go(-1);
  //   router.push("/smokePanel/metting");
};

const columns4 = ref<any>([
  { title: "评委人员", key: "title" },
  { title: "完成情况", key: "key", customSlot: "keyCustom" },
]);
const dataSource4 = ref([]);

const get_list = async () => {
  const res = await http.corsApi(`${url.value}/${meetingId.value}`, "get", {});
  console.log(res);
  let keyData: string[] = Object.keys(res.data);

  for (const ele in res.data) {
    console.log(ele);
    dataSource4.value.push({
      key: res.data[ele],
      title: ele,
    });
  }

  // dataSource4.value = res.data;

  console.log(columns4.value);
  console.log(dataSource4.value);
};

onMounted(() => {
  get_list();
});
</script>

<style scoped lang="scss">
.screen {
  width: 100%;
  height: 100%;
  &_title {
    padding: 30px 15px 30px 50px;
    box-sizing: border-box;
    background-color: #fff;
    span {
      font-size: 20px;
    }
  }
  &_content {
    width: 90%;
    margin: 15px auto 0;
  }
}
</style>